<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
	<title>Gagebu</title>	

	<script type="text/JavaScript" src="jquery-1.9.1.min.js"></script>
	<script type="text/JavaScript" src="jquery.mobile-1.3.2.min.js"></script>
	<link rel="stylesheet" href="jquery.mobile-1.3.2.min.css">	
	<script src="cordova-2.7.0.js"></script>
	<script>
	var g_pictureSource;
	var g_destinationType;

	function onLoad() {
		document.addEventListener("deviceready", onDeviceReady, false);
	}

	function onDeviceReady() {
		navigator.splashscreen.hide();			
		g_pictureSource = navigator.camera.PictureSourceType;
		g_destinationType = navigator.camera.DestinationType;	
	}


	function doCapture() {
		navigator.camera.getPicture(onPhotoDataSuccess, onPhotoFail, 
		{ quality : 100, destinationType : g_destinationType.DATA_URL });
	}

	function doCaptureFromGallery() {
		navigator.camera.getPicture(onPhotoURISuccess, onPhotoFail, 
		{ quality : 100, destinationType : g_destinationType.FILE_URI,
		  sourcetype : g_pictureSource.PHOTOLIBRARY});
	}

	function onPhotoFail(message) {
		alert("error :" + message);
	}

	function onPhotoDataSuccess(imageData) {
		var printImage = document.getElementById("camera_view");
		printImage.style.display = "block";
		printImage.src = "data:image/jpg;base64," + imageData;
	}

	function onPhotoURISuccess(imageURI) {
		var printImage = document.getElementById("camera_view");
		printImage.style.display = "block";
		printImage.src = imageURI;
	}
	</script>
</head>
<body onload="onLoad()">
	<div data-role="page">

		<div data-role="header">
			<h1>Gagebu</h1>

		</div>

		<div data-role="content">
	
			<div id="take_pic" class="input-container" data-inline="true">
				<a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true" style="float:left"></a>
				<a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true" style="float:right"></a>
			</div>

			<div id="camera_section">
				<img id="camera_view" style="display:none; width:300px; height:300px" >
			</div>
		<br />
			<div> 
				<ul data-role="listview" data-inset="true" data-inline="true">
    			<li><a href="#"><img src="./img/gf.png" alt="France" class="ui-li-icon ui-corner-none">France</a></li>
    			<li><a href="#"><img src="./img/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li>
    			<li><a href="#"><img src="./img/de.png" alt="Germany" class="ui-li-icon">Germany</a></li>
    			<li><a href="#"><img src="./img/fi.png" alt="Finland" class="ui-li-icon">Finland</a></li>
    			<li><a href="#"><img src="./img/us.png" alt="United States" class="ui-li-icon ui-corner-none">United States</a></li>
				</ul>
			</div>

		</div>

		<div data-role="footer">
			<div data-role="navbar" data-position="fixed" 
			data-tap-toggle="false" data-grid="c">
			<ul>
				<li><a href="#" class="ui-btn-active">City</a></li>
				<li><a href="#">Item</a></li>
				<li><a href="#">Statstic</a></li>
				<li><a href="#">Setting</a></li>
			</ul>
		</div><!-- /navbar -->

	</div>

</div>


</body>
</html>

